<template>
    <div class="container">
        <div class="wrap-container" :style="{'height': wrapHeight + 'px'}">
            <div class="wrap" ref="ball" @touchstart="ontouchstart"></div>
            <!-- <div class="button" :class="[clicked?'expend':'']" @click="expandedClick"></div> -->
        </div>
    </div>
</template>
<style scoped>
.wrap-container {
  width: 750px;
  align-items: center;
  justify-content: center;
}

.wrap {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: black;
}


</style>
<script>
import { Utils } from "weex-ui";
export default {
  data() {
    return {
      clicked: false,
      wrapHeight: 1334,
      x: 0,
      y: 0,
      isInAnimation: false,
      opacity: 1,
      gesToken: 0
    };
  },
  created() {
    this.wrapHeight = Utils.env.getPageHeight();
    this.$navigator.setLeftItem(
      {
        text: "返回", // 展示的文字 (和图片 二选一)
        textColor: "", // 文字颜色 (默认为白色)
        fontSize: "32", // 字号（默认32px）
        fontWeight: "normal", // 是否加粗（默认不加粗）
        image: "" // 展示的图片url (和文字 二选一，文字优先级更高)
      },
      () => {
        // 点击回调
        this.$router.back({
          type: "PUSH"
        });
      }
    );
  },
  methods: {
    expandedClick() {
      if (this.clicked) {
        this.clicked = false;
      } else {
        this.clicked = true;
      }
    },
    ontouchstart(event) {
      var vm = this;
      // 如果正在执行动画，则不触发
      if (vm.isInAnimation) return;
      // 解绑动画
      if (vm.gesToken != 0) {
        vm.$bindingx.unbind({
          eventType: "pan",
          token: vm.gesToken
        });
        vm.gesToken = 0;
        return;
      }

      let ballRef = vm.$refs.ball.ref;
      let gesTokenObj = vm.$bindingx.bind(
        {
          anchor: ballRef,
          eventType: "pan",
          props: [
            {
              element: ballRef,
              property: "transform.translateX",
              expression: "x+0"
            },
            {
              element: ballRef,
              property: "opacity",
              expression: "1-abs(x)/600"
            }
          ]
        },
        e => {
          if (e.state === "end") {
            vm.x += e.deltaX;
            vm.opacity = 1 - Math.abs(e.deltaX) / 600;
            vm.bindTiming();
          }
        }
      );
      vm.gesToken = gesTokenObj.token;
    },
    dismissCallback() {
      var vm = this;
      vm.$notice.toast({
        message: "小球消失"
      });
    },
    bindTiming() {
      var vm = this;
      vm.isInAnimation = false;
      let ballRef = vm.$refs.ball.ref;
      let changed_x, final_x, final_opacity, translate_x_origin;
      let shouldDismiss = false;

      if (vm.x >= -750 / 2 && vm.x <= 750 / 2) {
        shouldDismiss = false;
        final_x = 0;
        changed_x = 0 - vm.x;
        final_opacity = 1;
        translate_x_origin = `easeOutElastic(t,${vm.x},${changed_x},1000)`;
      } else if (vm.x < -750 / 2) {
        shouldDismiss = true;
        final_x = -750;
        changed_x = -750 - vm.x;
        final_opacity = 0;
        translate_x_origin = `easeOutExpo(t,${vm.x},${changed_x},1000)`;
      } else {
        shouldDismiss = true;
        final_x = 750;
        changed_x = 750 - vm.x;
        final_opacity = 0;
        translate_x_origin = `easeOutExpo(t,${vm.x},${changed_x},1000)`;
      }

      let opacity_origin = `linear(t,${vm.opacity},${final_opacity -
        vm.opacity},1000)`;
      let result = vm.$bindingx.bind(
        {
          eventType: "timing",
          exitExpression: "t>1000",
          props: [
            {
              element: ballRef,
              property: "transform.translateX",
              expression: translate_x_origin
            },
            {
              element: ballRef,
              property: "opacity",
              expression: opacity_origin
            }
          ]
        },
        e => {
          if (e.state === "end" || e.state === "exit") {
            vm.x = final_x;
            vm.opacity = final_opacity;
            vm.isInAnimation = false;
            shouldDismiss && vm.dismissCallback();
          }
        }
      );
    }
  }
};
</script>
